<style scoped>
    .upload-item{width:3.5rem;height:4.5rem;background-size:100%;}
    .upload-item-3{width:2.4rem;height:3.4rem;}
    .upload-item .img{width:3.5rem;height:3.5rem;background-size:cover;background-position: center;}
    .upload-item-3 .img{width:2.4rem;height:2.4rem;}
    .upload-item a{display: block;width:100%;height:100%;position: absolute;left:0;top:0;}
    .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
</style>
<template>
  <wrap title="填写用户资料">
    <div slot="page">
      <fill-progress :step="5"></fill-progress>
      <input class="hide" type="file" ref="file" @change="upload" accept="image/*" capture="camera">
      <div class="id-card light-bg">
        <p class="padding grey-6">1.拍照上传本人身份证</p>
        <div class="flex flex-justify-around margin-top">
          <a href="javascript:;" @click="trigger('idPositive')" class="upload-item relative">
            <div class="img" :style="{backgroundImage:'url('+idPositive+')'}"></div>
            <p class="text-center grey-9 margin-top">身份证正面</p>
          </a>
          <a href="javascript:;" @click="trigger('idOpposite')" class="upload-item relative">
            <div class="img" :style="{backgroundImage:'url('+idOpposite+')'}"></div>
            <p class="text-center grey-9 margin-top">身份证反面</p>
          </a>
        </div>
      </div>
      <div class="id-card light-bg">
        <p class="padding grey-6">2.拍照上传不同方位的本人头像</p>
        <div class="flex flex-justify-around margin-top">
          <a href="javascript:;" @click="trigger('userLeftSide')" class="upload-item upload-item-3 relative">
            <div class="img" :style="{backgroundImage:'url('+userLeftSide+')'}"></div>
            <p class="text-center grey-9 margin-top">左侧面</p>
          </a>
          <a href="javascript:;" @click="trigger('userPositive')" class="upload-item upload-item-3 relative">
            <div class="img" :style="{backgroundImage:'url('+userPositive+')'}"></div>
            <p class="text-center grey-9 margin-top">正面</p>
          </a>
          <a href="javascript:;" @click="trigger('userRightSide')" class="upload-item upload-item-3 relative">
            <div class="img" :style="{backgroundImage:'url('+userRightSide+')'}"></div>
            <p class="text-center grey-9 margin-top">右侧面</p>
          </a>
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'blue-bg':'grey-9-bg','font-16']" @click="next()">提交</a>

      <div class="flex flex-center" style="padding-bottom:20px;">
        <a href="javascript:;" class="blue" @click="refuse">拒绝该用户的申请</a>
      </div>
    </div>
  </wrap>
</template>
<script>
    import '~/static/plugin/lrz.js'
    import mixins from '~/mixins'
    import wrap from '~/components/wrap.vue'
    import fillProgress from './progress.vue'
    export default {
      mixins: [mixins],
      components: {wrap, fillProgress},
      data () {
        return {
          userId: 0,
          nextEnable: false,
          type: '',
          defaultIdPositive: '',
          defaultIdOppositive: '',
          defaultUserLeftSide: '',
          defaultUserPositive: '',
          defaultUserRightSide: '',
          verify: {
            'idPositive': '',
            'idOpposite': '',
            'userLeftSide': '',
            'userPositive': '',
            'userRightSide': ''
          },
          file: {
            idPositive: '',
            userPositive: ''
          }
        }
      },
      computed: {
        idPositive () {
          return this.verify.idPositive || this.defaultIdPositive
        },
        idOpposite () {
          return this.verify.idOpposite || this.defaultIdOppositive
        },
        userLeftSide () {
          return this.verify.userLeftSide || this.defaultUserLeftSide
        },
        userPositive () {
          return this.verify.userPositive || this.defaultUserPositive
        },
        userRightSide () {
          return this.verify.userRightSide || this.defaultUserRightSide
        }
      },
      created () {
        const self = this
        self.userId = self.$route.params.userId
        self.orderId = self.$route.params.orderId
        /* self.request({act:'getIdentify',userId:self.userId}).then(res=>{
            if(res.code==0){
                self.verify=res.data;
            }
        }); */
        self.$watch('verify', () => {
          if (self.verify.idPositive && self.verify.idOpposite && self.verify.userLeftSide && self.verify.userPositive && self.verify.userRightSide) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      },
      methods: {
        trigger (type) {
          const self = this
          self.type = type
          self.$refs.file.click()
        },
        upload (e) {
          const self = this
          const file = e.target.files[0]
          if (!file) { return }// 选第二张时取消会触发change的bug
          /* eslint-disable*/
          layer.open({type: 2, shadeClose: false})
          lrz(file, { width: 1000 }).then(img => {
            let form = new FormData()
            form.append('image', img.file)
            form.append('length', img.fileLen)
            self.request({
              act: 'uploadImg',
              body: form
            }).then(res => {
              layer.closeAll()
              if (res.code == 0) {
                switch (self.type) {
                  case 'idPositive':
                    self.verify.idPositive = res.data.url
                    self.file.idPositive = img.file
                    break
                  case 'idOpposite':
                    self.verify.idOpposite = res.data.url
                    break
                  case 'userLeftSide':
                    self.verify.userLeftSide = res.data.url
                    break
                  case 'userPositive':
                    self.verify.userPositive = res.data.url
                    self.file.userPositive = img.file
                    break
                  case 'userRightSide':
                    self.verify.userRightSide = res.data.url
                    break
                }
              } else {
                layer.open({content: res.userMsg, skin: 'msg', time: 2})
              }
            })
          }).always(function () {
            layer.closeAll()
          })
        },
        next () {
          const self = this
          if (!self.nextEnable) {
            return
          }
          const data = new FormData()
          data.append('platUserId', self.userId)
          data.append('idPositive', self.file.idPositive)
          data.append('userPositive', self.file.userPositive)
          const saveData = []
          for (const i in self.verify) {
            saveData.push(
              {
                caId: self.orderId,
                caaNickname: i,
                caaUrl: self.verify[i],
                caaName: i == 'idPositive' ? '身份证正面' : i == 'idOpposite' ? '身份证反面' : i == 'userLeftSide' ? '左侧面' : i == 'userPositive' ? '正面' : i == 'userRightSide' ? '右侧面' : '',
                caaFlag: 3
              }
                  )
          }
          data.append('data', JSON.stringify(saveData))
          layer.open({type: 2, shadeClose: false})
          this.request({
            act: 'saveIdentify',
            body: data
          }).then(res => {
            layer.closeAll()
            if (res.code == 0) {
              self.$router.push('/detail/' + self.userId)
            } else {
              layer.open({content: res.userMsg, skin: 'msg', time: 2})
            }
          })
        }
      }
    }
</script>
